<!--
 * @Author: tom
 * @Date: 2022-09-07 14:16:32
 * @LastEditors: 阿航
 * @LastEditTime: 2022-10-28 13:51:12
 * @FilePath: \shop\src\views\login\index.vue
-->
<template>
  <div class="login">
    <div class="login_box">
      <!-- 头像logo -->
      <div class="logo">
        <img src="../../assets/images/user.jpg" alt="" />
      </div>
      <!-- 登陆 -->
      <el-form
        ref="loginFromRef"
        label-width="70px"
        class="login_from"
        :rules="loginFromRules"
        :model="queryParams"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="queryParams.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="queryParams.password" type="password"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="loginHandle(loginFromRef)"
            >登陆</el-button
          >
          <el-button type="info" @click="restLoginFrom(loginFromRef)"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
// import {setToken} from '../../utils/auth'
// import {loginApi} from '@/api/login'

import {useRouter} from 'vue-router'
import {reactive, ref} from 'vue'
import useStore from '../../store/index' // 引入store
const loginFromRef = ref()
const queryParams = reactive({
  userName: '',
  password: '',
})

const loginFromRules = reactive({
  userName: [{required: true, message: '请输入账号', trigger: 'blur'}],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
})

const {user} = useStore() // 结构出user
const router = useRouter()
const loginHandle = (formEl) => {
  // console.log(formEl)

  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      user.login(queryParams).then(() => {
        router.push({
          path: '/',
        })
      })
    }
  })

  // console.log(res)

  // const res = await loginApi(queryParams)
  // console.log(res)
  // setToken(res.data)
  // setToken(123)
}

// 重置方法
const restLoginFrom = (formEl) => {
  if (!formEl) return

  formEl.resetFields()
  // console.log(queryParams)
}
</script>
<style scoped>
.login {
  height: 100%;
  background: #2b4b6b;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.logo {
  width: 130px;
  height: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}
.logo img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #eee;
}

.btns {
  display: flex;
  justify-content: flex-end;
}
.login_from {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
